[html] view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
  
    <style>  
        *{  
            margin: 0;  
        }  
        .hide{  
            display: none;  
        }  
        .menu{  
            background-color: gainsboro;  
            position: fixed;  
            top:0;  
            left: 50%;  
            width: 800px;  
            height: 60px;  
            margin-left: -400px;  
            border: 1px solid red;  
        }  
        .menu .menu_item{  
            float:left;  
            padding:0 30px;  
            line-height: 60px;  
            cursor: pointer;  
        }  
        .content{  
            min-height: 50px;  
            width:800px ;  
            margin-left: -400px;  
            border-left:1px solid red ;  
            border-right: 1px solid red;  
            border-bottom: 1px solid red;  
            position: fixed;  
            top: 62px;  
            left: 50%;  
            background-color: papayawhip;  
            overflow: auto;  
        }  
        .active{  
            background-color: darkgoldenrod;  
        }  
    </style>  
</head>  
<body>  
    <div class="menu">  
        <div class="menu_item" a="1">菜单一</div>  
        <div class="menu_item" a="2">菜单二</div>  
        <div class="menu_item" a="3">菜单三</div>  
    </div>  
    <div class="content">  
        <div b="1" >内容一</div>  
        <div b="2" class="hide">内容二</div>  
        <div b="3" class="hide">内容三</div>  
  
    </div>  
  
  
    <script src="jquery-1.12.4.js"></script>  
    <script>  
        $('.menu_item').click(function () {  
            $(this).addClass('active');  
            $(this).siblings().removeClass('active');  
            var tag = $(this).attr('a');  
//            console.log(tag)  
            $('.content').children('[b="'+ tag +'"]').removeClass('hide');  
            $('.content').children('[b="'+ tag +'"]').siblings().addClass('hide');  
        })  
    </script>  
</body>  
</html>  
